import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_learn_vi/src/bean/bean_user.dart';
import 'package:flutter_learn_vi/src/common/user_helper.dart';
import 'package:flutter_learn_vi/src/page/train/train_tab_item_page.dart';

/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 2021/1/14.
///
/// 可关注公众号：我的大前端生涯   获取最新技术分享
/// 可关注网易云课堂：https://study.163.com/instructor/1021406098.htm
/// 可关注博客：https://blog.csdn.net/zl18603543572
///
/// 代码清单
///代码清单
class TrainMainPage extends StatefulWidget {
  /// 0 显示标题 1不显示标题
  final int pageIndex;

  const TrainMainPage({Key key, this.pageIndex = 0}) : super(key: key);

  @override
  _TrainMainPageState createState() => _TrainMainPageState();
}

class _TrainMainPageState extends State<TrainMainPage>
    with SingleTickerProviderStateMixin {
  //在这里标签页面使用的是TabView所以需要创建一个控制器
  TabController _tabController;

  //页面初始化方法
  @override
  void initState() {
    super.initState();
    //初始化
    _tabController = new TabController(length: 3, vsync: this);
  }

  //页面销毁回调生命周期
  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  ///代码清单 5-19 NestedScrollView 下拉刷新
  ///lib/code/code5/example_504_CustomScrollView.dart
  @override
  Widget build(BuildContext context) {
    //构建页面的主体
    return Scaffold(
      //下拉刷新
      body: widget.pageIndex == 0
          ? buildNestedScrollView()
          : Column(
              children: [
                Container(
                  child: buildFlexibleTooBarWidget(),
                ),
                Expanded(child: buidChildWidget()),
              ],
            ),
    );
  }

  ///代码清单 5-20 NestedScrollView 的创建
  ///lib/code/code5/example_504_CustomScrollView.dart
  Widget buildNestedScrollView() {
    //滑动视图
    return NestedScrollView(
      //配置可折叠的头布局
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return [buildSliverAppBar()];
      },
      //页面的主体内容
      body: buidChildWidget(),
    );
  }

  ///代码清单 5-21 NestedScrollView 的创建
  ///lib/code/code5/example_504_CustomScrollView.dart
  //通常在用到 PageView + BottomNavigationBar 或者 TabBarView + TabBar 的时候
  //大家会发现当切换到另一页面的时候, 前一个页面就会被销毁, 再返回前一页时, 页面会被重建,
  //随之数据会重新加载, 控件会重新渲染 带来了极不好的用户体验.
  //由于TabBarView内部也是用的是PageView, 因此两者的解决方式相同
  //页面的主体内容
  Widget buidChildWidget() {
    return TabBarView(
      controller: _tabController,
      children: <Widget>[
        TrainItemPage(1),
        TrainItemPage(2),
        TrainItemPage(3),
      ],
    );
  }

  ///代码清单 5-22 SliverAppBar 的创建
  ///lib/code/code5/example_504_CustomScrollView.dart
  Widget buildSliverAppBar() {
    return SliverAppBar(
      //第一部分 标题 这里是搜索框
      title: buildHeader(),
      //标题居中
      centerTitle: true,
      //5.1.2小节中有对这一块的属性配置说明
      pinned: true,
      floating: false,
      snap: false,
      //阴影高度
      elevation: 1.0,
      //展开的高度
      expandedHeight: buildExpandHeight(),
      //第二部分 AppBar下的内容区域
      flexibleSpace: FlexibleSpaceBar(
        //背景
        //配置的是一个widget也就是说在这里可以使用任意的
        //Widget组合 在这里直接使用的是一个图片
        background: buildFlexibleSpaceWidget(),
      ),
      //第三部分
      bottom: buildFlexibleTooBarWidget(),
    );
  }

  ///代码清单 5-23 构建SliverAppBar的标题title
  ///lib/code/code5/example_504_CustomScrollView.dart
  Widget buildHeader() {
    //userBean.userType == 12 ? "教师中心" :
    UserBean userBean = UserHelper.getInstance.userBean;
    return Container(
      alignment: Alignment.center,
      //宽度填充
      width: double.infinity,
      //左边距
      padding: EdgeInsets.only(right: 50),
      //圆角边框背景装饰
      decoration: BoxDecoration(
        //背景颜色
        color: Colors.white,
        //边框颜色
        border: Border.all(color: Colors.white),
        //边框圆角
        borderRadius: BorderRadius.circular(30),
      ),
      //左右排列的线性布局
      child: Stack(
        children: [
          Text(
            "我的培训",
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
          ),
        ],
      ),
    );
  }

  ///代码清单 5-24 FlexibleSpaceBar 中的内容
  ///lib/code/code5/example_504_CustomScrollView.dart
  Widget buildFlexibleSpaceWidget() {
    //上下排列的线性布局
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        //第一部分是一个 轮播图
        Container(
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.only(bottom: 66),
          height: 120,
          child: Stack(
            children: [
              // Positioned.fill(
              //   child: Image.asset("assets/images/2.0x/train_header_bg.webp"),
              // ),
            ],
          ),
        )
      ],
    );
  }

  ///代码清单 5-25 FlexibleSpaceBar 中的内容
  ///lib/code/code5/example_504_CustomScrollView.dart
  Widget buildRightClassWidget() {
    return Container(
      height: 120,
      child: Row(
        children: [
          //两个等比排开
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  height: 80,
                  width: 80,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(40))),
                  child: Icon(Icons.android_rounded),
                )
              ],
            ),
          ),
          //两个等比排开
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  height: 80,
                  width: 80,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(40))),
                  child: Icon(Icons.phone_android_rounded),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }

  ///代码清单 5-26 [SliverAppBar]的bottom属性配制
  ///lib/code/code5/example_504_CustomScrollView.dart
  Widget buildFlexibleTooBarWidget() {
    //[PreferredSize]用于配置在AppBar或者是SliverAppBar
    //的bottom中 实现 PreferredSizeWidget
    return PreferredSize(
      //定义大小
      preferredSize: Size(MediaQuery.of(context).size.width, 44),
      //配置任意的子Widget
      child: Container(
        alignment: Alignment.center,
        child: Container(
          color: Colors.white,
          //随着向上滑动，TabBar的宽度逐渐增大
          //父布局Container约束为 center对齐
          //所以程现出来的是中间x轴放大的效果
          width: MediaQuery.of(context).size.width,
          child: TabBar(
            //指示线的宽度与文本宽度一致
            indicatorSize: TabBarIndicatorSize.label,
            //指示线的颜色
            indicatorColor: Colors.redAccent,
            //未选中文本的颜色
            unselectedLabelColor: Colors.grey,
            //选中文本的颜色
            labelColor: Colors.redAccent,
            controller: _tabController,
            tabs: <Widget>[
              new Tab(
                text: "进行中",
              ),
              new Tab(
                text: "已完成",
              ),
              new Tab(
                text: "全部",
              ),
            ],
          ),
        ),
      ),
    );
  }

  double buildExpandHeight() {
    return 100;
  }
}

///代码清单 5-27 TabBarView 中使用的标签页面
///lib/code/code5/example_504_CustomScrollView.dart
